<template>
  <Content title="操作工选择">
    <view class="device-details">
      <view class="content">
        <view class="header-box">
          <u-search
            placeholder="请输入姓名或者工号进行搜索"
            v-model="search.name"
            :clearabled="true"
            :showAction="true"
            @custom="getList(true)"
          ></u-search>
        </view>

        <view class="header">全部</view>

        <view class="" v-if="multiple">
          <view class="title">已选择列</view>
          <view class="tag-box">
            <u-tag
              type="success"
              style="margin-right: 5px; margin-bottom: 5px"
              :text="item.name"
              v-for="(item, index) in tagList"
              :show="true"
              mode="plain"
              @close="tagClose(index)"
            />
          </view>
        </view>

        <view class="main-box">
          <List
            ref="orderList"
            :scrollNoData="scrollNoData"
            :data="data"
            :tagList="tagList"
            @itemClick="itemClick"
            @radioGroupChange="radioGroupChange"
            @onRefresh="onRefresh"
            @scrollBottom="scrollBottom"
            :multiple="multiple"
          ></List>
        </view>

        <view class="btn-v">
          <view class="but-box">
            <u-button
              class="btn"
              type="primary"
              @click="replaceMold"
              text="确定"
            ></u-button>
          </view>
        </view>
      </view>
    </view>
  </Content>
</template>

<script>
import Content from "@/components/content/index";
import fetch from "@/utils/fetch";
import { getPageData } from "@/store/user";
import List from "./components/list";
export default {
  components: {
    Content,
    List,
  },
  data() {
    return {
      model: {},
      data: [],
      search: {
        materialCode: "",
        pageNum: 1,
        pageSize: 15,
        empno: "",
      },
      navIndex: 0,
      id: "",
      show: false,
      modalTitle: "",
      radioGroup: "",
      materialCode: "",
      scroll: false,
      scrollNoData: false,
      obj: {},
      multiple: true,
      tagList: [],
    };
  },
  onLoad: function (option) {
    //option为object类型，会序列化上个页面传递的参数
    this.search.materialCode = option.materialCode;
    if (option.multiple) this.multiple = option.multiple === "true";
    this.model = getPageData();
  },
  onShow: function () {},
  onReady: function () {
    this.getList();
    this.$nextTick(() => {
      const data = uni.getStorageSync("getSelectList", data);
      this.$refs.orderList.radioGroup = data;
    });
  },
  computed: {},
  mounted() {},
  methods: {
    //  init() {
    //    fetch("get", "/dms/mobile/getUserNameList")
    // .then(({ data }) => {
    //      this.model = data;
    //    });
    //  },
    getColor(item2) {
      return item2 == "待排产"
        ? "#E5963A"
        : item2 == "已排产"
        ? "#998BF2"
        : item2 == "下发"
        ? "#6BBEE1"
        : item2 == "生产"
        ? "#73D8A6"
        : item2 == "中断"
        ? "#D48B3E"
        : item2 == "暂停"
        ? "#D8BE49"
        : item2 == "完成"
        ? "#4668E2"
        : item2 == "转产中"
        ? "#E794C9"
        : item2 == "转产完成"
        ? "#C25BC6"
        : item2 == "调机中"
        ? "#D8B2F2"
        : item2 == "调机完成"
        ? "#8698F6"
        : item2 == "拆模"
        ? "#EA709F"
        : "#31b099";
    },
    onRefresh() {
      this.getList(true);
    },
    ok() {},
    itemClick(i) {
      this.obj = this.data[i];
    },
    radioGroupChange(val, obj) {
      const i = this.tagList.findIndex((item2) => item2.id == obj.id);
      if (i === -1) {
        this.tagList.push(obj);
      } else {
        this.tagList.splice(i, 1);
      }
      console.log("data", this.tagList);
    },
    tagClose(index) {
      this.tagList.splice(index, 1);
    },
    replaceMold() {
      const data = this.tagList;
      const that = this;
      console.log("data", data);
      if (data && Array.isArray(data) ? data.length > 0 : true) {
        uni.setStorageSync(
          "getSelectList",
          data.map((item) => item.id)
        );
        uni.$emit(
          "getSelectList",
          data.map((item) => item.id)
        ); //id类似于“类名”，可修改，this.id替换成具体要传的参数名
        uni.setStorageSync("getSelectLists", data);
        uni.navigateBack({
          delta: 1, //返回上一页
        });
      } else {
        if (data)
          uni.$emit("openToast", {
            type: "error",
            icon: "error",
            title: "请选中一条数据!",
          });
        return;
      }
    },
    scrollBottom(next) {
      const that = this;
      if (!that.scrollNoData) {
        that.search.pageNum = that.search.pageNum + 1;
        that.scroll = true;
        that.getList().then(() => {
          next(that.scrollNoData);
        });
        return;
      }
      next();
    },
    getList(arg) {
      const that = this;
      that.$loading.open();
      if (arg) {
        that.search.pageNum = 1;
        that.scroll = false;
        that.scrollNoData = false;
        that.data = [];
      }
      let obj = {};
      for (const key in that.search) {
        if (Object.hasOwnProperty.call(that.search, key)) {
          const element = that.search[key];
          if (element) obj[key] = element;
        }
      }
      return fetch("get", "/dms/mobile/getUserNameList", obj).then(
        ({ data }) => {
          if (that.scroll) {
            if ((data?.list || []).length === 0) {
              that.scrollNoData = true;
            } else {
              that.data.push(...data?.list);
            }
          } else {
            that.data = data?.list || [];
          }
          // that.data = [{ id: "1" }, { id: "2" }, { id: "3" }];
          that.$loading.close();
        }
      );
    },
  },
};
</script>

<style scoped lang="scss">
.device-details {
  height: 100%;
  overflow: auto;
  padding-bottom: 160rpx;

  .content {
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }

  .main-box {
    flex: 1;
    overflow: auto;
  }

  .header {
    font-weight: 600;
    margin-bottom: 20rpx;
    padding: 0 40rpx;
  }

  .header-box {
    padding: 5px 10px 5px;
    background-color: #ffffff;
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
  }

  .title {
    font-size: 32rpx;
    margin-bottom: 20rpx;
    padding: 0 40rpx 20rpx 40rpx;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;

    .txt {
      flex: 1;
    }

    .tag-box {
      display: flex;
      align-items: center;
    }
  }

  .tag-box {
    display: flex;
    flex-wrap: wrap;
    padding: 0 20px 10px;
  }
  .content-top {
    padding: 40rpx;

    .state {
      color: #f17a0a;
      margin-bottom: 20rpx;
    }
  }

  .text-box {
    display: flex;
    margin-bottom: 20rpx;

    .label {
      color: #666;
    }
  }

  .search-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 60rpx;

    .label {
      margin: 0 20rpx;
    }
  }

  .number-davities-box {
    text-align: center;

    .header {
      margin-bottom: 20rpx;
    }

    .item-box {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
    }
  }

  .btn-box {
    display: flex;

    .btn-box-item {
      padding: 20rpx;
      flex: 1;
      text-align: center;
      border-top: 1px solid #e0e0e0;
      border-right: 1px solid #e0e0e0;
      color: #67aee7;
    }
  }
}
</style>
